<template>
  <div class="total_order_month">
    <div class="total_order_detail">
      <div class="choose_month">
        <div class="choose_month_select">
          <div style="display: flex;align-items: center;margin: 10px 0;">
            <div style="padding-right: 10px; max-width: 50%;" class="choose_title">
              日期
            </div>
            <el-date-picker v-model="chooseYear" type="year" :clearable="false" @change="getMsg">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="month_detail">
        <el-descriptions title="" direction="vertical" size="medium" :column="3" border :label-style="LS"
          :contentStyle="CS">
          <el-descriptions-item label="签单总额">{{ yearDataMsg.signYearTotalPrice }}万元</el-descriptions-item>
          <el-descriptions-item label="内部货值">{{ yearDataMsg.innerYearTotalPrice }}万元</el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              目标完成率（目标总额：{{
              yearDataMsg.planSignYearTotalPrice
              }}万元）
            </template>
            {{ finishRate }}%
          </el-descriptions-item>
          <el-descriptions-item label="项目收入">{{ yearDataMsg.projectPrice }}元</el-descriptions-item>
          <el-descriptions-item label="项目成本">{{ yearDataMsg.projectCost }}元</el-descriptions-item>
          <el-descriptions-item label="项目利润">{{ yearDataMsg.projectGross }}元</el-descriptions-item>
          <el-descriptions-item label="去盲盒收入">{{ yearDataMsg.projectNoBiddingPrice }}元</el-descriptions-item>
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label="去盲盒利润">{{ yearDataMsg.projectNoBiddingRateGross }}元</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="month_project">
        <div>
          <div class="month_project_title" style="display: flex;">
            <div>
              签单项目
            </div>
          </div>
          <div style="display: inline-flex;">
            <div class="choose_month">
              <div class="choose_month_select">
                <div style="display: flex;align-items: center;width: 80%; margin: 10px 0;">
                  <div style="padding-right: 10px; width: 20px;" class="choose_title">
                    日期
                  </div>
                  <el-date-picker v-model="chooseMonth" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :clearable="false" @change="changeChooseMonth">
                  </el-date-picker>
                </div>
              </div>
              <div class="choose_month_select">
                <div style="display: flex;align-items: center;margin: 10px 0;">
                  <div style="padding-right: 10px; max-width: 40%;" class="choose_title">
                    方案
                    <div>
                      <el-tooltip class="tooltip" effect="dark" placement="right">
                        <ul slot="content">
                          <li>方案1：应收 & 预计成本</li>
                          <li>方案2：实收 & 预计成本</li>
                          <li>方案3：实收 & 实际成本</li>
                          <li>方案4：应收/实收 & 预计成本/实际成本</li>
                        </ul>
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                  </div>
                  <el-select v-model="useType" placeholder="方案" @change="changeSelectUseType">
                    <el-option v-for="item in useTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <!-- <div class="choose_month_select">
                <div style="display: flex;align-items: center;margin: 10px 0;">
                  <div
                    style="padding-right: 10px; max-width: 40%;"
                    class="choose_title"
                  >
                    品类
                  </div>
                  <el-select
                    v-model="cateIds"
                    placeholder="品类"
                    @change="changeSelectcateIds"
                  >
                    <el-option
                      v-for="item in cateList"
                      :key="index"
                      :label="item.sysValueName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div> -->
              <div class="choose_month_select">
                <div style="display: flex;align-items: center;margin: 10px 0;">
                  <div style="padding-right: 10px; width: 30%;" class="choose_title">
                    到货日期
                  </div>
                  <el-date-picker v-model="chooseArrivalMonth" type="daterange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false" @change="changeChooseMonth">
                  </el-date-picker>
                </div>
              </div>
            </div>

            <div style="padding-right: 20px; display: flex; align-items: center;">
              <el-button type="primary" @click="initSearch">清空</el-button>
            </div>

            <div style="padding-right: 30px; display: flex; align-items: center;">
              <el-button type="primary" @click="getSearch">查询</el-button>
            </div>

            <div style="padding-right: 30px; display: flex; align-items: center;">
              <el-button type="text" @click="showTableColumnChoose">列表展示筛选</el-button>
            </div>

            <div>
              <el-button @click="handleExport" type="text" class="exportButton">导出</el-button>
            </div>
          </div>
          <el-table :data="dataList" @row-dblclick="handleRowDblClick"
            :height="dataList && dataList.length > 2 ? 700 : 300" border stripe :row-style="{ height: '0' }"
            :cell-style="{ padding: '3px' }" v-loading="tableLoading" :row-class-name="tableRowClassName"
            style="width: 100%">
            <el-table-column v-if="showTableColumnList.includes('signDate') " prop="signDate" label="签单时间" width="130"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('orderNo')" prop="orderNo" label="合同编号"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="orderNo" filter-type="text"
                  @tableFilter="tableFilterCode" @resetFilter="tableFilterResetCode" @getPost="getPost"
                  field-title="tableFilterCode" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectName') " prop="projectName" label="客户公司名称"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="projectName" filter-type="text"
                  @tableFilter="tableFilterProjectName" @resetFilter="tableFilterResetProjectName" @getPost="getPost"
                  field-title="tableFilterProjectName" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('brands') " prop="brands" label="项目名称"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="brands" filter-type="text"
                  @tableFilter="tableFilterBrands" @resetFilter="tableFilterResetBrands" @getPost="getPost"
                  field-title="tableFilterBrands" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('area') " prop="area" label="区域" show-overflow-tooltip
              width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="checkbox"
                  :custom-arr-list="tableDataArea" @tableFilter="tableFilterArea" @resetFilter="tableFilterResetArea"
                  @getPost="getPost" field-title="tableFilterArea" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('cateNames') " prop="cateNames" label="品类"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="checkbox"
                  :custom-arr-list="tableDataCates" @tableFilter="tableFilterCateIds"
                  @resetFilter="tableFilterResetCates" @getPost="getPost" field-title="tableFilterCateIds" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('businessName') " prop="businessName" label="商务"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                  :custom-arr-list="tableDataBusiness" @tableFilter="tableFilterBusiness"
                  @resetFilter="tableFilterResetBusiness" @getPost="getPost" field-title="tableFilterBusiness" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('invoiceCompany') " prop="invoiceCompany" label="开票公司"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="checkbox"
                  :custom-arr-list="tableDataInvoiceCompanyIds" @tableFilter="tableFilterInvoiceCompanyIds"
                  @resetFilter="tableFilterResetInvoiceCompanyIds" @getPost="getPost"
                  field-title="tableFilterInvoiceCompanyIds" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('invoicePrice') " prop="invoicePrice" label="开票额"
              show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('status')" prop="status" label="项目状态" width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="checkbox"
                  :custom-arr-list="tableDataStatus" @tableFilter="tableFilterStatus"
                  @resetFilter="tableFilterResetStatus" @getPost="getPost" field-title="tableFilterStatus" />
              </template>
              <template slot-scope="scope">
                <span v-if="scope.row.status === 1">
                  创建中
                </span>
                <span v-if="scope.row.status === 2">
                  核价中
                </span>
                <span v-if="scope.row.status === 3">
                  跟进中
                </span>
                <span v-if="scope.row.status === 4">
                  已签单
                </span>
                <span v-if="scope.row.status === 5">
                  执行完
                </span>
                <span v-if="scope.row.status === 9">
                  已黄单
                </span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('totalPrice') " prop="totalPrice" label="客户货值"
              width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('actualValuePrice') " prop="actualValuePrice"
              label="实际货值" width="150">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                  :custom-arr-list="actualValuePriceList" @tableFilter="tableFilterActualValuePrice"
                  @resetFilter="tableFilterResetActualValuePrice" @getPost="getPost"
                  field-title="tableFilterActualValuePrice" />
              </template>
              <template slot-scope="scope">
                <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.actualValuePrice" autosize
                  clearable type="text" size="mini"
                  @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                <span v-else style="white-space: pre-wrap;">{{ scope.row.actualValuePrice }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('innerPrice') " prop="innerPrice" label="内部货值"
              width="150">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                  :custom-arr-list="innerPriceList" @tableFilter="tableFilterInnerPrice"
                  @resetFilter="tableFilterResetInnerPrice" @getPost="getPost" field-title="tableFilterInnerPrice" />
              </template>
              <template slot-scope="scope">
                <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.innerPrice" autosize
                  clearable type="text" size="mini"
                  @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                <span v-else style="white-space: pre-wrap;">{{ scope.row.innerPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('checkSalePrice') " prop="checkSalePrice" label="核价卖货应收"
              width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('biddingSalePrice')" prop="biddingSalePrice"
              label="竞价卖货应收" width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('saleRealPrice') " prop="saleRealPrice" label="卖货实收"
              show-overflow-tooltip width="150">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                  :custom-arr-list="saleRealPriceList" @tableFilter="tableFilterSaleRealPrice"
                  @resetFilter="tableFilterResetSaleRealPrice" @getPost="getPost"
                  field-title="tableFilterSaleRealPrice" />
              </template>
              <template slot-scope="scope">
                <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.saleRealPrice" autosize
                  clearable type="text" size="mini"
                  @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                <span v-else style="white-space: pre-wrap;">{{ scope.row.saleRealPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="estimatedCost" label="预计成本" v-if="showTableColumnList.includes('estimatedCost')">
              <el-table-column v-if="showTableColumnList.includes('estimatedCost')" prop="estimatedSelfMediaCost"
                label="自营媒体">
                <template slot="header" slot-scope="scope">
                  <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                    :custom-arr-list="estimatedSelfMediaCostList" @tableFilter="tableFilterEstimatedSelfMediaCost"
                    @resetFilter="tableFilterResetEstimatedSelfMediaCost" @getPost="getPost"
                    field-title="tableFilterEstimatedSelfMediaCost" />
                </template>
                <template slot-scope="scope">
                  <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.estimatedSelfMediaCost"
                    autosize clearable type="text" size="mini"
                    @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                  <span v-else style="white-space: pre-wrap;">{{ scope.row.estimatedSelfMediaCost }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableColumnList.includes('estimatedCost')" prop="estimatedExternalMediaCost"
                label="外采媒体">
                <template slot="header" slot-scope="scope">
                  <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                    :custom-arr-list="estimatedExternalMediaCostList"
                    @tableFilter="tableFilterEstimatedExternalMediaCost"
                    @resetFilter="tableFilterResetEstimatedExternalMediaCost" @getPost="getPost"
                    field-title="tableFilterEstimatedExternalMediaCost" />
                </template>
                <template slot-scope="scope">
                  <el-input v-if="scope.row[scope.column.property + 'Show']"
                    v-model="scope.row.estimatedExternalMediaCost" autosize clearable type="text" size="mini"
                    @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                  <span v-else style="white-space: pre-wrap;">{{ scope.row.estimatedExternalMediaCost }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableColumnList.includes('estimatedCost')" prop="estimatedCost" label="合计">
                <template slot="header" slot-scope="scope">
                  <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                    :custom-arr-list="estimatedCostList" @tableFilter="tableFilterEstimatedCost"
                    @resetFilter="tableFilterResetEstimatedCost" @getPost="getPost"
                    field-title="tableFilterEstimatedCost" />
                </template>
              </el-table-column>
            </el-table-column>
            <!-- <el-table-column v-if="showTableColumnList.includes('estimatedCost')" prop="estimatedCost" label="预计成本">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                  :custom-arr-list="estimatedCostList" @tableFilter="tableFilterEstimatedCost"
                  @resetFilter="tableFilterResetEstimatedCost" @getPost="getPost"
                  field-title="tableFilterEstimatedCost" />
              </template>
              <template slot-scope="scope">
                <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.estimatedCost" autosize
                  clearable type="text" size="mini"
                  @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                <span v-else style="white-space: pre-wrap;">{{ scope.row.estimatedCost }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('actualCost')" prop="actualCost" label="实际成本"
              width="150">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                  :custom-arr-list="actualCostList" @tableFilter="tableFilterActualCost"
                  @resetFilter="tableFilterResetActualCost" @getPost="getPost" field-title="tableFilterActualCost" />
              </template>
              <template slot-scope="scope">
                <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.actualCost" autosize
                  clearable type="text" size="mini"
                  @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                <span v-else style="white-space: pre-wrap;">{{ scope.row.actualCost }}</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="actualCost" label="实际成本" v-if="showTableColumnList.includes('actualCost')">
              <el-table-column v-if="showTableColumnList.includes('actualCost') " prop="actualSelfMediaCost"
                label="自营媒体">
                <template slot="header" slot-scope="scope">
                  <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                    :custom-arr-list="actualSelfMediaCostList" @tableFilter="tableFilterActualSelfMediaCost"
                    @resetFilter="tableFilterResetActualSelfMediaCost" @getPost="getPost"
                    field-title="tableFilterActualSelfMediaCost" />
                </template>
                <template slot-scope="scope">
                  <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.actualSelfMediaCost"
                    autosize clearable type="text" size="mini"
                    @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                  <span v-else style="white-space: pre-wrap;">{{ scope.row.actualSelfMediaCost }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableColumnList.includes('actualCost') " prop="actualExternalMediaCost"
                label="外采媒体">
                <template slot="header" slot-scope="scope">
                  <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                    :custom-arr-list="actualExternalMediaCostList" @tableFilter="tableFilterActualExternalMediaCost"
                    @resetFilter="tableFilterResetActualExternalMediaCost" @getPost="getPost"
                    field-title="tableFilterActualExternalMediaCost" />
                </template>
                <template slot-scope="scope">
                  <el-input v-if="scope.row[scope.column.property + 'Show']" v-model="scope.row.actualExternalMediaCost"
                    autosize clearable type="text" size="mini"
                    @change="onEnterOrBlurChange(scope.row, scope.column, scope.$index)" />
                  <span v-else style="white-space: pre-wrap;">{{ scope.row.actualExternalMediaCost }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableColumnList.includes('actualCost')" prop="actualCost" label="合计">
                <template slot="header" slot-scope="scope">
                  <FilterHeader :column="scope.column" field-name="type" filter-type="selectMore"
                    :custom-arr-list="actualCostList" @tableFilter="tableFilterActualCost"
                    @resetFilter="tableFilterResetActualCost" @getPost="getPost" field-title="tableFilterActualCost" />
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectPrice') " prop="projectPrice" label="项目收入"
              show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectOutGoodPrice') " prop="projectOutGoodPrice"
              label="出货货值" show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectOutGoodRate')" prop="projectOutGoodRate"
              label="出货进度" show-overflow-tooltip :render-header="renderHeaderProjectOutGoodRate" width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectOutGoodSomeRate') "
              prop="projectOutGoodSomeRate" label="出货部分成本" show-overflow-tooltip
              :render-header="renderHeaderProjectOutGoodSomeRate" width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectOutGoodRemark') " prop="projectOutGoodRemark"
              label="出货备注" show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectOutGoodTimes') " prop="projectOutGoodTimes"
              label="出货倍数" show-overflow-tooltip :render-header="renderHeaderprojectOutGoodTimes" width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectNoBiddingPrice') " prop="projectNoBiddingPrice"
              label="去盲盒收入" show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectNoBiddingRateGross') "
              prop="projectNoBiddingRateGross" label="去盲盒毛利" show-overflow-tooltip width="100"
              :render-header="renderHeaderprojectNoBiddingRate">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('blindBoxTotalPrice')" prop="blindBoxTotalPrice"
              label="盲盒货值" width="100">
            </el-table-column>
            <!-- <el-table-column v-if="showTableColumnList.includes('blindBoxPrice')" prop="blindBoxPrice" label="盲盒收入"
              width="80">
            </el-table-column> -->
            <!-- <el-table-column v-if="showTableColumnList.includes('heartBoxPrice') " prop="heartBoxPrice" label="心动鲤盒收入"
              width="80">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('ownUsePrice')" prop="ownUsePrice" label="公司自用收入"
              width="80">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('otherPrice')" prop="otherPrice" label="其他用途收入"
              width="80">
            </el-table-column> -->
            <el-table-column v-if="showTableColumnList.includes('blindBoxRate')" prop="blindBoxRate" label="盲盒利润"
              :render-header="renderHeaderblindBoxRate" width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('costRate') " prop="costRate" label="成本占比(%)"
              :render-header="renderHeadercostRate" width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectRate')" prop="projectRate" label="毛利"
              show-overflow-tooltip :render-header="renderHeaderprojectRate" width="100">
            </el-table-column>
            <!-- <el-table-column prop="projectRateGross" label="毛利率" show-overflow-tooltip
              :render-header="renderHeaderprojectRateGross" width="100">
            </el-table-column> -->
            <el-table-column v-if="showTableColumnList.includes('projectRateGross') " prop="projectRateGross"
              label="毛利率" show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="projectRateGross" filter-type="number"
                  @tableFilter="tableFilterProjectRateGross" @resetFilter="tableFilterResetProjectRateGross"
                  @getPost="getPost" field-title="tableFilterProjectRateGross" renderHeader="毛利 / 收入" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('arrivalProgress') " prop="arrivalProgress" label="到货状态"
              show-overflow-tooltip width="100">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="checkbox"
                  :custom-arr-list="tableDataArrivalProgressId" @tableFilter="tableFilterArrivalProgressId"
                  @resetFilter="tableFilterResetArrivalProgressId" @getPost="getPost"
                  field-title="tableFilterArrivalProgressId" />
              </template>
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('arrivalInnerPrice') " prop="arrivalInnerPrice"
              label="到货内部货值" show-overflow-tooltip width="150">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('arrivalRate') " label="到货百分比" show-overflow-tooltip
              width="150">
              <template slot="header" slot-scope="scope">
                <FilterHeader :column="scope.column" field-name="type" filter-type="checkbox"
                  :custom-arr-list="arrivalRateList" @tableFilter="tableFilterArrivalRate"
                  @resetFilter="tableFilterResetArrivalRate" @getPost="getPost" field-title="tableFilterArrivalRate" />
              </template>
              <template slot-scope="scope">
                {{ scope.row.arrivalRate ? (scope.row.arrivalRate + '%') : '' }}
              </template>
            </el-table-column>

            <!-- <el-table-column
              prop="goodArrivalStatus"
              label="到货进度"
              show-overflow-tooltip
              width="100"
            >
            </el-table-column> -->
            <el-table-column v-if="showTableColumnList.includes('arrivalTime') " prop="arrivalTime" label="到货日期"
              show-overflow-tooltip width="100">
            </el-table-column>
            <el-table-column v-if="showTableColumnList.includes('projectRemark') " prop="projectRemark" label="项目备注"
              show-overflow-tooltip width="100">
            </el-table-column>

            <template v-for="(useToPriceItem, useToPriceIndex) in useToPriceList">
              <el-table-column :key="useToPriceIndex" v-if="showTableColumnList.includes(useToPriceItem.column)"
                :prop="useToPriceItem.column" :label="useToPriceItem.label" show-overflow-tooltip width="150">
              </el-table-column>
            </template>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <div>
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
                </div>
                <div>
                  <el-button @click="handleClickGoProject(scope.row)" type="text" size="small">查看项目</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="global-page">
            <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" :current-page="pageNum"
              background layout="total, prev, pager, next" :total="total">
            </el-pagination>
          </div> -->
        </div>
      </div>
    </div>

    <el-dialog title="项目详情" :visible.sync="dialogVisible" width="80%" :before-close="beforeCloseVisivle">
      <projectMsg :operationList="operationList" :projectId="chooseId" :isChange="isChange" :showNum="showNumTest">
      </projectMsg>
    </el-dialog>

    <el-dialog title="列表展示筛选" :visible.sync="showTableColumnDialog" :close-on-click-modal="false" width="50%">
      <div>
        <el-checkbox :indeterminate="isIndeterminateTableColumn" v-model="checkAllTableColumn"
          @change="handleCheckAllTableColumnChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group :min="1" v-model="chooseTableColumnList" @change="handleCheckedTableColumnChange">
          <el-checkbox v-for="(item, index) in showTableColumnModelList" :label="item.column" :key="index">
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTableColumnDialog = false">取 消</el-button>
        <el-button type="primary" @click="chooseTableColumn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import API from "@/api/apiHome";
import APISysLabel from "@/api/apiSysLabel";
import projectMsg from "@/components/ProjectMsg";
import APIBusiness from "@/api/apiBusiness";
import FilterHeader from "@/components/FilterHeader";
export default {
  name: "TotalOrderMonth",
  components: {
    projectMsg,
    FilterHeader,
  },
  props: {
    operationList: Array,
  },
  watch: {
    '$route': function (to, from) {
      this.getMsg();
      this.getSysLabel();
      this.getBusinessList();
      this.getPost();
    },
  },
  mounted() {
    this.$bus.$on('clearSearchParams', () => {
      this.chooseArrivalMonth = []
    })
  },
  data() {
    return {
      // cateIds: null,
      tableDataInvoiceCompanyIds: [],
      cateList:[],
      chooseId: null,
      isChange: false,
      showNumTest: 1,
      pageNum: 1,
      pageSize: 100,
      total: 0,
      totalPrice: 1000,
      innerPrice: 500,
      discount: 0,
      CS: {
        "text-align": "center", //文本居中
        "min-width": "150px", //最小宽度
        "word-break": "break-all", //过长时自动换行
        height: "70px",
      },
      LS: {
        color: "#000",
        "text-align": "center",
        "font-weight": "600",
        height: "50px",
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        "min-width": "110px",
        "word-break": "keep-all",
      },
      chooseMonth: [new Date(), new Date()],
      chooseArrivalMonth: [],
      dataList: [],
      dataMsg: {},
      dialogVisible: false,
      useTypeOptions: [
        {
          value: 1,
          label: "方案1",
        },
        {
          value: 2,
          label: "方案2",
        },
        {
          value: 3,
          label: "方案3",
        },
        {
          value: 4,
          label: "方案4",
        },
      ],
      useType: 4,
      areaList: [],
      businessList: [],
      invoiceCompanyList: [],
      arrivalProgressList: [],
      areaId: null,
      orderNo: null,
      invoiceCompany: null,
      projectName: "",
      brands: "",
      businessIds: [],
      chooseYear: new Date(),
      yearDataMsg: {},
      finishRate: 0,
      search: {
        areaId: null,
        statuses: null,
        arrivalProgressIds: null,
        businessIds: null,
        cateIds:null,
      },
      tableDataArea: [], // 表格的数据
      tableDataCopyArea: {}, // 深度拷贝的tableData对象，用来筛选数据
      tableDataCates: [], // 表格的数据
      tableDataCopyCates: {}, // 深度拷贝的tableData对象，用来筛选数据
      conditionsFieldsArea: [], // 记录参与筛选的列信息
      tableDataBusiness: [], // 表格的数据
      tableDataCopyBusiness: {}, // 深度拷贝的tableData对象，用来筛选数据
      conditionsFieldsBusiness: [], // 记录参与筛选的列信息
      tableDataStatus: [
        {
          label: "创建中",
          value: 1,
        },
        {
          label: "核价中",
          value: 2,
        },
        {
          label: "跟进中",
          value: 3,
        },
        {
          label: "已签单",
          value: 4,
        },
        {
          label: "执行完",
          value: 5,
        },
      ], // 表格的数据
      tableDataCopyStatus: {}, // 深度拷贝的tableData对象，用来筛选数据
      conditionsFieldsStatus: [], // 记录参与筛选的列信息
      tableDataArrivalProgressId: [], // 表格的数据
      tableDataCopyArrivalProgressId: {}, // 深度拷贝的tableData对象，用来筛选数据
      conditionsFieldsArrivalProgressId: [], //
      innerPriceList: [],
      actualValuePriceList: [],
      saleRealPriceList: [],
      estimatedCostList: [],
      actualCostList: [],
      arrivalRateList: [],
      innerPriceModelList: [],
      actualValuePriceModelList: [],
      saleRealPriceModelList: [],
      estimatedCostModelList: [],
      actualCostModelList: [],
      getModelMsgStatus: 1,
      estimatedSelfMediaCostList: [],
      estimatedExternalMediaCostList: [],
      actualSelfMediaCostList: [],
      actualExternalMediaCostList: [],
      showTableColumnModelList: [
        { column: 'signDate', label: '签单时间' },
        { column: 'orderNo', label: '合同编号' },
        { column: 'projectName', label: '客户公司名称' },
        { column: 'brands', label: '项目名称' },
        { column: 'area', label: '区域' },
        { column: 'cateNames', label: '品类' },
        { column: 'businessName', label: '商务' },
        { column: 'invoiceCompany', label: '开票公司' },
        { column: 'invoicePrice', label: '开票额' },
        { column: 'status', label: '项目状态' },
        { column: 'totalPrice', label: '客户货值' },
        { column: 'actualValuePrice', label: '实际货值' },
        { column: 'innerPrice', label: '内部货值' },
        { column: 'checkSalePrice', label: '核价卖货应收' },
        { column: 'biddingSalePrice', label: '竞价卖货应收' },
        { column: 'saleRealPrice', label: '卖货实收' },
        { column: 'estimatedCost', label: '预计成本' },
        { column: 'actualCost', label: '实际成本' },
        { column: 'projectPrice', label: '项目收入' },
        { column: 'projectOutGoodPrice', label: '出货货值' },
        { column: 'projectOutGoodRate', label: '出货进度' },
        { column: 'projectOutGoodSomeRate', label: '出货部分成本' },
        { column: 'projectOutGoodRemark', label: '出货备注' },
        { column: 'projectOutGoodTimes', label: '出货倍数' },
        { column: 'projectNoBiddingPrice', label: '去盲盒收入' },
        { column: 'projectNoBiddingRateGross', label: '去盲盒毛利' },
        { column: 'blindBoxTotalPrice', label: '盲盒货值' },
        { column: 'blindBoxRate', label: '盲盒利润' },
        { column: 'costRate', label: '成本占比(%)' },
        { column: 'projectRate', label: '毛利' },
        { column: 'projectRateGross', label: '毛利率' },
        { column: 'arrivalProgress', label: '到货状态' },
        { column: 'arrivalInnerPrice', label: '到货内部货值' },
        { column: 'arrivalRate', label: '到货百分比' },
        { column: 'arrivalTime', label: '到货日期' },
        { column: 'projectRemark', label: '项目备注' },
        // { column: 'blindBoxPrice', label: '盲盒收入' },
        // { column: 'heartBoxPrice', label: '心动鲤盒收入' },
        // { column: 'ownUsePrice', label: '公司自用收入' },
        // { column: 'otherPrice', label: '其他用途收入' },
      ],
      priceModelList: [
        { column: 'blindBoxPrice', label: '盲盒收入' },
        { column: 'heartBoxPrice', label: '心动鲤盒收入' },
        { column: 'ownUsePrice', label: '公司自用收入' },
        { column: 'otherPrice', label: '其他用途收入' },
      ],
      showTableColumnList: [],
      chooseTableColumnList: [],
      showTableColumnDialog: false,
      checkAllTableColumn: false,
      isIndeterminateTableColumn: true,
      useToPriceList: [],
    };
  },
  created() {
    this.search = {
      areaId: null,
      statuses: null,
      arrivalProgressIds: null,
      businessIds: null,
      invoiceCompanyIds: null,
      chooseArrivalMonth : null,
      cateIds : null,
      innerPriceSearches: [],
      actualValuePriceSearches: [],
      saleRealPriceSearches: [],
      estimatedCostSearches: [],
      actualCostSearches: [],
      arrivalRateSearches: [],
      estimatedSelfMediaCostSearches: [],
      estimatedExternalMediaCostSearches: [],
      actualSelfMediaCostSearches: [],
      actualExternalMediaCostSearches: [],
    };
    this.getSysLabel();
    this.chooseMonth = [
      new Date(new Date().getFullYear(), new Date().getMonth(), 1),
      new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
    ];
    this.chooseYear = new Date();
    this.getMsg();
    this.getBusinessList();
    this.getPost();
    this.getShowColumn()
  },
  
  methods: {
    chooseTableColumn(){
      if (!this.chooseTableColumnList || this.chooseTableColumnList.length == 0){
        this.$message({
          type: "error",
          message: "必须选择一列数据",
        });
        return
      }
      let showTableColumnList = JSON.parse(JSON.stringify(this.chooseTableColumnList))
      localStorage.setItem('showTableColumnList', JSON.stringify(showTableColumnList))
      this.showTableColumnList = showTableColumnList
      this.showTableColumnDialog = false
    },
    handleCheckAllTableColumnChange(val) {
      let list = this.showTableColumnModelList.map(item => item.column);
      this.chooseTableColumnList = val ? list : [];
      this.isIndeterminateTableColumn = false;
    },
    handleCheckedTableColumnChange(value) {
      let checkedCount = value.length;
      this.checkAllTableColumn = checkedCount === this.showTableColumnModelList.length;
      this.isIndeterminateTableColumn = checkedCount > 0 && checkedCount < this.showTableColumnModelList.length;
    },
    showTableColumnChoose(){
      this.showTableColumnDialog = true
    },
    getShowColumn(){
      let tableColumnList = localStorage.getItem('showTableColumnList');
      if(tableColumnList){
        let showList = JSON.parse(tableColumnList);
        this.showTableColumnList = showList;
        this.chooseTableColumnList = showList;
        if (showList.length === this.showTableColumnModelList.length){
          this.checkAllTableColumn = true;
          this.isIndeterminateTableColumn = false;
        }else {
          this.checkAllTableColumn = false;
          this.isIndeterminateTableColumn = true;
        }
      } else {
        let list = this.showTableColumnModelList.map(item => item.column);
        this.showTableColumnList = list;
        this.chooseTableColumnList = list;
        this.checkAllTableColumn = true;
        this.isIndeterminateTableColumn = false;
      }
    },
    tableFilterArrivalRate(data, reset) {
      this.search.arrivalRateSearches = data.conditions.checkbox;
    },
    tableFilterResetArrivalRate(data) {
      this.search.arrivalRateSearches = null;
    },
    tableFilterInnerPrice(data, reset) {
      this.search.innerPriceSearches = data.conditions.selectMore;
    },
    tableFilterResetInnerPrice(data) {
      this.search.innerPriceSearches = null;
    },
    tableFilterActualValuePrice(data, reset) {
      this.search.actualValuePriceSearches = data.conditions.selectMore;
    },
    tableFilterResetActualValuePrice(data) {
      this.search.actualValuePriceSearches = null;
    },
    tableFilterSaleRealPrice(data, reset) {
      this.search.saleRealPriceSearches = data.conditions.selectMore;
    },
    tableFilterResetSaleRealPrice(data) {
      this.search.saleRealPriceSearches = null;
    },
    tableFilterEstimatedCost(data, reset) {
      this.search.estimatedCostSearches = data.conditions.selectMore;
    },
    tableFilterResetEstimatedCost(data) {
      this.search.estimatedCostSearches = null;
    },
    tableFilterEstimatedSelfMediaCost(data, reset) {
      this.search.estimatedSelfMediaCostSearches = data.conditions.selectMore;
    },
    tableFilterResetEstimatedSelfMediaCost(data) {
      this.search.estimatedSelfMediaCostSearches = null;
    },
    tableFilterEstimatedExternalMediaCost(data, reset) {
      this.search.estimatedExternalMediaCostSearches = data.conditions.selectMore;
    },
    tableFilterResetEstimatedExternalMediaCost(data) {
      this.search.estimatedExternalMediaCostSearches = null;
    },
    tableFilterActualSelfMediaCost(data, reset) {
      this.search.actualSelfMediaCostSearches = data.conditions.selectMore;
    },
    tableFilterResetActualSelfMediaCost(data) {
      this.search.actualSelfMediaCostSearches = null;
    },
    tableFilterActualExternalMediaCost(data, reset) {
      this.search.actualExternalMediaCostSearches = data.conditions.selectMore;
    },
    tableFilterResetActualExternalMediaCost(data) {
      this.search.actualExternalMediaCostSearches = null;
    },
    tableFilterActualCost(data, reset) {
      this.search.actualCostSearches = data.conditions.selectMore;
    },
    tableFilterResetActualCost(data) {
      this.search.actualCostSearches = null;
    },
    // 双击触发单元格
    handleRowDblClick(row, column) {
      if (!this.operationList.includes("editSomePrice")) return
      // 内部货值，实际货值，卖货实收，预估成本，实际成本
      if (!["innerPrice", "actualValuePrice", "saleRealPrice", "estimatedSelfMediaCost", "estimatedExternalMediaCost", "actualSelfMediaCost", "actualExternalMediaCost"].includes(column.property)) return
      if (row[column.property + 'Show']) return
      if (!row.projectId) return
      let chooseIndex = null
      for(var i=0; i<this.dataList.length; i++){
        if (this.dataList[i].projectId === row.projectId) {
          chooseIndex = i
          break;
        }
      }
      if (chooseIndex) {
        let list = this.dataList
        list[chooseIndex][column.property + 'Show'] = true
        list[chooseIndex][column.property] = row[column.property]
        list.forEach((item, index) => {
          if (index !== chooseIndex && list[index][column.property + 'Show']) {
            list[index][column.property + 'Show'] = false
          }
        })
        this.dataList = JSON.parse(JSON.stringify(list))
      }
    },
    // 输入框失焦事件或者回车事件
    onEnterOrBlurChange(row, column, index) {
      let list = this.dataList
      list[index][column.property + 'Show'] = false
      list[index][column.property] = row[column.property]
      // 计算预计成本
      if(column.property === 'estimatedSelfMediaCost' || column.property === 'estimatedExternalMediaCost'){
        list[index].estimatedCost = (row.estimatedSelfMediaCost ? Number(row.estimatedSelfMediaCost) : 0)
          + (row.estimatedExternalMediaCost ? Number(row.estimatedExternalMediaCost) : 0)
      }
      // 计算实际成本
      if (column.property === 'actualSelfMediaCost' || column.property === 'actualExternalMediaCost') {
        list[index].actualCost = (row.actualSelfMediaCost ? Number(row.actualSelfMediaCost) : 0)
          + (row.actualExternalMediaCost ? Number(row.actualExternalMediaCost) : 0)
      }
      this.dataList = JSON.parse(JSON.stringify(list))
      let params = {
        projectId: row.projectId,
        [column.property]: Number(row[column.property])
      }
      // 请求后台更改数据
      API.doEditSomeProjectPrice(params).then((res) => {
        if (res.key === 1000) {
          this.$message({
            type: "success",
            message: "提交成功",
          });
        }
      });
    },
    tableFilterResetBrands() {
      this.search.brands = null;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'success-row';
      } else {
        if (row.projectRateGross && row.projectRateGross <= 0.3) {
          return 'danger-row';
        }else{
          return '';
        }
      }
    },
    tableFilterArrivalProgressId(data, reset) {
      // https://blog.csdn.net/qq_36396822/article/details/129047453
      console.log("filterDataArrivalProgressId", data);
      this.search.arrivalProgressIds = data.conditions.checkbox;
    },
    tableFilterResetArrivalProgressId(data) {
      // 清空当前列筛选条件
      this.conditionsFieldsArrivalProgressId.forEach((item, index) => {
        if (item.fieldName === data.fieldName) {
          this.conditionsFieldsArrivalProgressId.splice(index, 1);
        }
      });
      // 没有筛选条件了直接请求列表
      let list = [];
      this.arrivalProgressList.forEach((item) => {
        list.push({
          value: item.id,
          label: item.sysValueName,
        });
      });
      this.tableDataArrivalProgressId = list;
      this.tableDataCopyArrivalProgressId = JSON.parse(
        JSON.stringify(this.tableDataArrivalProgressId)
      );
      this.search.arrivalProgressIds = null;
    },
    tableFilterInvoiceCompanyIds(data, reset) {
      // https://blog.csdn.net/qq_36396822/article/details/129047453
      console.log("filterDataInvoiceCompanyIds", data);
      this.search.invoiceCompanyIds = data.conditions.checkbox;
    },
    tableFilterResetInvoiceCompanyIds(data) {
      // 没有筛选条件了直接请求列表
      let list = [];
      this.invoiceCompanyList.forEach((item) => {
        list.push({
          value: item.id,
          label: item.sysValueName,
        });
      });
      this.tableDataInvoiceCompanyIds = list;
      this.tableDataCopyInvoiceCompanyIds = JSON.parse(
        JSON.stringify(this.tableDataInvoiceCompanyIds)
      );
      this.search.invoiceCompanyIds = null;
    },
    tableFilterStatus(data, reset) {
      // https://blog.csdn.net/qq_36396822/article/details/129047453
      this.search.statuses = data.conditions.checkbox;
    },
    tableFilterResetStatus(data) {
      // 清空当前列筛选条件
      this.conditionsFieldsStatus.forEach((item, index) => {
        if (item.fieldName === data.fieldName) {
          this.conditionsFieldsStatus.splice(index, 1);
        }
      });
      // 没有筛选条件了直接请求列表
      let list = [
        {
          label: "创建中",
          value: 1,
        },
        {
          label: "核价中",
          value: 2,
        },
        {
          label: "跟进中",
          value: 3,
        },
        {
          label: "已签单",
          value: 4,
        },
        {
          label: "执行完",
          value: 5,
        },
      ];
      this.tableDataStatus = list;
      this.tableDataCopyStatus = JSON.parse(
        JSON.stringify(this.tableDataStatus)
      );
      this.search.statuses = null;
    },
    tableFilterBusiness(data, reset) {
      // https://blog.csdn.net/qq_36396822/article/details/129047453
      console.log("filterDataBusiness", data);
      this.search.businessIds = data.conditions.selectMore;
    },
    tableFilterResetBusiness(data) {
      // 清空当前列筛选条件
      this.conditionsFieldsBusiness.forEach((item, index) => {
        if (item.fieldName === data.fieldName) {
          this.conditionsFieldsBusiness.splice(index, 1);
        }
      });
      // 没有筛选条件了直接请求列表
      let list = [];
      this.businessList.forEach((item) => {
        list.push({
          value: item.id,
          label: item.username,
        });
      });
      this.tableDataBusiness = list;
      this.tableDataCopyBusiness = JSON.parse(
        JSON.stringify(this.tableDataBusiness)
      );
      this.search.businessIds = null;
    },
    tableFilterArea(data, reset) {
      // https://blog.csdn.net/qq_36396822/article/details/129047453
      this.search.areaId = data.conditions.checkbox;
    },
    tableFilterCateIds(data, reset) {
      this.search.cateIds = data.conditions.checkbox;
    },
    tableFilterCode(data, reset) {
      this.search.orderNo = data.conditions.text;
    },
    tableFilterProjectName(data, reset) {
      this.search.projectName = data.conditions.text;
    },
    tableFilterBrands(data, reset) {
      this.search.brands = data.conditions.text;
    },
    tableFilterResetProjectRateGross() {
      this.search.startProjectRateGross = null;
      this.search.endProjectRateGross = null;
    },
    tableFilterProjectRateGross(data, reset) {
      this.search.startProjectRateGross = data.conditions.number1 ? Number(data.conditions.number1) : null;
      this.search.endProjectRateGross = data.conditions.number2 ? Number(data.conditions.number2) : null;
    },
    tableFilterResetArea(data) {
      // 清空当前列筛选条件
      this.conditionsFieldsArea.forEach((item, index) => {
        if (item.fieldName === data.fieldName) {
          this.conditionsFieldsArea.splice(index, 1);
        }
      });
      // 没有筛选条件了直接请求列表
      let list = [];
      this.areaList.forEach((item) => {
        list.push({
          value: item.id,
          label: item.sysValueName,
        });
      });
      this.tableDataArea = list;
      this.tableDataCopyArea = JSON.parse(JSON.stringify(this.tableDataArea));
      this.search.areaId = null;
    },
    tableFilterResetCode(data) {
      // 清空当前列筛选条件
      this.search.orderNo = null;
    },
    tableFilterResetCates(data) {
      // 清空当前列筛选条件
      this.search.cateIds = null;
    },
    tableFilterResetProjectName(data) {
      // 清空当前列筛选条件
      this.search.projectName = null;
    },
    tableFilterResetProjectBrands(data) {
      // 清空当前列筛选条件
      this.search.brands = null;
    },
    initSearch() {
      this.chooseMonth = null;
      this.chooseArrivalMonth = null;
      this.getPost();
    },
    getSearch() {
      this.pageNum = 1;
      this.dataList = [];
      this.getPost();
    },
    getBusinessList() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
      };
      if (this.areaId) {
        let list = this.areaList.filter((item) => item.id == this.areaId);
        params.area = list[0].sysValueName;
      }
      APIBusiness.getBusinessList(params).then((res) => {
        if (res.key === 1000) {
          this.businessList = res.result.list;
          let tableDataBusiness = [];
          res.result.list.forEach((item) => {
            tableDataBusiness.push({
              label: item.username,
              value: item.id,
            });
          });
          this.tableDataBusiness = tableDataBusiness;
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    renderHeaderprojectRateGross(h, { column, $index }) {
      return (
        <div>
          预计毛利率
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>毛利/收入</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeaderprojectNoBiddingRate(h, { column, $index }) {
      return (
        <div>
          去盲盒毛利
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>去盲盒毛利=（项目收入【按方案】 - 盲盒收入【按方案】）  -  成本【按方案】</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeaderprojectRate(h, { column, $index }) {
      return (
        <div>
          毛利
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>毛利 = 收入【按方案】 - 成本【按方案】</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeadercostRate(h, { column, $index }) {
      return (
        <div>
          成本占比
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>成本/客户货值</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeaderblindBoxRate(h, { column, $index }) {
      return (
        <div>
          盲盒利润
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>盲盒收入 - 盲盒成本【按方案】</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeaderprojectOutGoodTimes(h, { column, $index }) {
      return (
        <div>
          出货倍数
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>卖货收入/出货成本</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeaderProjectOutGoodSomeRate(h, { column, $index }) {
      return (
        <div>
          出货部分成本
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>成本*出货进度</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    renderHeaderProjectOutGoodRate(h, { column, $index }) {
      return (
        <div>
          出货进度
          <el-tooltip class="tooltip" effect="dark" placement="right">
            <ul slot="content">
              <li>出货货值/客户货值</li>
            </ul>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
      );
    },
    changeSelectUseType(val) {
      // this.getPost()
    },
    changeSelectArea(val) {
      this.getPost();
      this.getBusinessList();
    },
    changeSelect(val) {
      this.getPost();
    },
    changeInput(val) {
      console.log(val);
      this.getPost();
    },
    handleClickGoProject(row) {
      this.$router.push({
        path: "/project",
        query: {
          projectId: row.projectId,
          projectName: row.projectName,
        },
      });
    },
    beforeCloseVisivle() {
      this.dialogVisible = false;
    },
    handleClick(row) {
      this.chooseId = row.projectId;
      this.isChange = false;
      this.dialogVisible = true;
      setTimeout(() => {
        this.showNumTest = this.showNumTest + 1;
      }, 100);
    },
    changeChooseMonth(val) {
      this.getModelMsgStatus = 1
      // this.pageNum = 1
      // this.dataList = []
      // this.getPost()
    },
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getPost();
    },
    getSysLabel() {
      this.$bus.$emit("show-loading", true);
      const params = {
        token: this.$store.state.token,
        sysLabelIds: "2,3,18,13",
      };
      APISysLabel.getSysLabelValueManageList(params).then((res) => {
        if (res.key === 1000) {
          this.cateList = res.result.data[2];
          let tableDataCates = [];
          this.cateList.forEach((item) => {
            tableDataCates.push({
              label: item.sysValueName,
              value: item.id,
            });
          });
          this.tableDataCates = tableDataCates;

          this.areaList = res.result.data[3];
          let tableDataArea = [];
          this.areaList.forEach((item) => {
            tableDataArea.push({
              label: item.sysValueName,
              value: item.id,
            });
          });
          this.tableDataArea = tableDataArea;
          this.tableDataCopyArea = JSON.parse(
            JSON.stringify(this.tableDataArea)
          );
          this.invoiceCompanyList = res.result.data[18];
          let tableDataInvoiceCompanyIds = [];
          this.invoiceCompanyList.forEach((item) => {
            tableDataInvoiceCompanyIds.push({
              label: item.sysValueName,
              value: item.id,
            });
          });
          this.tableDataInvoiceCompanyIds = tableDataInvoiceCompanyIds;
          this.tableDataCopyInvoiceCompanyIds = JSON.parse(
            JSON.stringify(this.tableDataInvoiceCompanyIds)
          );
          this.arrivalProgressList = res.result.data[13];
          let tableDataArrivalProgressId = [];
          this.arrivalProgressList.forEach((item) => {
            tableDataArrivalProgressId.push({
              label: item.sysValueName,
              value: item.id,
            });
          });
          this.tableDataArrivalProgressId = tableDataArrivalProgressId;
          this.tableDataCopyArrivalProgressId = JSON.parse(
            JSON.stringify(this.tableDataArrivalProgressId)
          );
        }
        this.$bus.$emit("show-loading", false);
      });
    },
    getMsg() {
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        time: this.chooseYear.getTime(),
      };
      API.getHomeYear(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          let data = res.data;
          this.finishRate = (
            (data.signYearTotalPrice / data.planSignYearTotalPrice) *
            100
          ).toFixed(1);
          data.signYearTotalPrice = (data.signYearTotalPrice / 10000).toFixed(
            2
          );
          data.planSignYearTotalPrice = (
            data.planSignYearTotalPrice / 10000
          ).toFixed(2);
          data.innerYearTotalPrice = (data.innerYearTotalPrice / 10000).toFixed(
            2
          );
          this.yearDataMsg = data;
          this.tableLoading = false;
        }
      });
    },
    getPost() {
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        // pageNum: this.pageNum,
        // pageSize: this.pageSize,
        useType: this.useType,
      };
      if (this.search.innerPriceSearches && this.search.innerPriceSearches.length > 0) {
        params.innerPriceSearches = this.search.innerPriceSearches.join(",");
      }
      if (this.search.actualValuePriceSearches && this.search.actualValuePriceSearches.length > 0) {
        params.actualValuePriceSearches = this.search.actualValuePriceSearches.join(",");
      }
      if (this.search.saleRealPriceSearches && this.search.saleRealPriceSearches.length > 0) {
        params.saleRealPriceSearches = this.search.saleRealPriceSearches.join(",");
      }
      if (this.search.estimatedCostSearches && this.search.estimatedCostSearches.length > 0) {
        params.estimatedCostSearches = this.search.estimatedCostSearches.join(",");
      }
      if (this.search.estimatedSelfMediaCostSearches && this.search.estimatedSelfMediaCostSearches.length > 0) {
        params.estimatedSelfMediaCostSearches = this.search.estimatedSelfMediaCostSearches.join(",");
      }
      if (this.search.estimatedExternalMediaCostSearches && this.search.estimatedExternalMediaCostSearches.length > 0) {
        params.estimatedExternalMediaCostSearches = this.search.estimatedExternalMediaCostSearches.join(",");
      }
      if (this.search.actualSelfMediaCostSearches && this.search.actualSelfMediaCostSearches.length > 0) {
        params.actualSelfMediaCostSearches = this.search.actualSelfMediaCostSearches.join(",");
      }
      if (this.search.actualExternalMediaCostSearches && this.search.actualExternalMediaCostSearches.length > 0) {
        params.actualExternalMediaCostSearches = this.search.actualExternalMediaCostSearches.join(",");
      }
      if (this.search.actualCostSearches && this.search.actualCostSearches.length > 0) {
        params.actualCostSearches = this.search.actualCostSearches.join(",");
      } 
      if (this.search.arrivalRateSearches && this.search.arrivalRateSearches.length > 0) {
        params.arrivalRateSearches = this.search.arrivalRateSearches.join(",");
      }
      if (this.areaId) {
        params.areaId = this.areaId;
      }
      if (this.invoiceCompany) {
        params.invoiceCompany = this.invoiceCompany;
      }
      if (this.projectName) {
        params.projectName = this.projectName;
      }
      if (this.brands) {
        params.brands = this.brands;
      }
      if (this.businessIds && this.businessIds.length > 0) {
        params.businessIds = this.businessIds.join(",");
      }
      if (this.search.areaId && this.search.areaId.length > 0) {
        params.areaIds = this.search.areaId.join(",");
      }
      if (this.search.orderNo) {
        params.orderNo = this.search.orderNo;
      }
      if (this.search.projectName) {
        params.projectName = this.search.projectName;
      }
      if (this.search.brands) {
        params.brands = this.search.brands;
      }
      if (this.search.statuses && this.search.statuses.length > 0) {
        params.statuses = this.search.statuses.join(",");
      }
      if (
        this.search.arrivalProgressIds &&
        this.search.arrivalProgressIds.length > 0
      ) {
        params.arrivalProgressIds = this.search.arrivalProgressIds.join(",");
      }
      if (
        this.search.invoiceCompanyIds &&
        this.search.invoiceCompanyIds.length > 0
      ) {
        params.invoiceCompanyIds = this.search.invoiceCompanyIds.join(",");
      }

      if (this.search.businessIds && this.search.businessIds.length > 0) {
        params.businessIds = this.search.businessIds.join(",");
      }
      if (this.chooseArrivalMonth && this.chooseArrivalMonth.length > 0) {
        (params.startArrivalTime = this.chooseArrivalMonth[0].getTime()),
          (params.endArrivalTime = this.chooseArrivalMonth[1].getTime()),
          (this.chooseMonth = null);
      }
      if (this.chooseMonth && this.chooseMonth.length > 0) {
        (params.time = this.chooseMonth[0].getTime()),
          (params.endTime = this.chooseMonth[1].getTime());
      }
      if(this.search.cateIds && this.search.cateIds.length > 0){
          params.cateIds = this.search.cateIds.join(",");
      }
      if (this.search.startProjectRateGross){
        params.startProjectRateGross = this.search.startProjectRateGross
      }
      if (this.search.endProjectRateGross) {
        params.endProjectRateGross = this.search.endProjectRateGross
      }
      API.getHomeSignProject(params).then((res) => {
        if (res.key === 1000) {
          res = res.result;
          this.total = res.count;
          res.list.forEach((item) => {
            if (item.signTime) {
              item.signDate = this.formatterTime(item.signTime);
            }
            if (item.arrivalTime) {
              item.arrivalTime = this.formatterTime(item.arrivalTime);
            }
          });
          this.discount =
            res.data.innerPrice && res.data.totalPrice
              ? ((res.data.innerPrice / res.data.totalPrice) * 100).toFixed(1)
              : 0;
          this.dataMsg = res.data;
          let list = res.list;
          list.forEach(item => {
            if (item.useToPriceMap){
              for (let key in item.useToPriceMap) {
                item[key] = item.useToPriceMap[key] ? item.useToPriceMap[key] : 0
              }
            }
          })
          let obj = {
            signDate: "合计",
            orderNo: "",
            projectName: "",
            brands: "",
            area: "",
            businessName: "",
            invoiceCompany: "",
            invoicePrice: res.data.invoicePrice,
            status: "",
            totalPrice: res.data.totalPrice,
            actualValuePrice: res.data.actualValuePrice,
            innerPrice: res.data.innerPrice,
            checkSalePrice: res.data.checkSalePrice,
            biddingSalePrice: res.data.biddingSalePrice,
            saleRealPrice: res.data.saleRealPrice,
            estimatedCost: res.data.estimatedCost,
            estimatedSelfMediaCost: res.data.estimatedSelfMediaCost,
            estimatedExternalMediaCost: res.data.estimatedExternalMediaCost,
            actualCost: res.data.actualCost,
            actualSelfMediaCost: res.data.actualSelfMediaCost,
            actualExternalMediaCost: res.data.actualExternalMediaCost,
            projectPrice: res.data.projectPrice,
            projectOutGoodPrice: res.data.projectOutGoodPrice,
            projectOutGoodRate: "",
            projectOutGoodSomeRate: "",
            projectOutGoodRemark: "",
            projectOutGoodTimes: "",
            projectNoBiddingPrice: res.data.projectNoBiddingPrice,
            projectNoBiddingRateGross: res.data.projectNoBiddingRateGross,
            blindBoxTotalPrice: res.data.blindBoxTotalPrice,
            blindBoxPrice: res.data.blindBoxPrice,
            blindBoxRate: "",
            costRate: "",
            projectRate: "",
            projectRateGross: "",
            arrivalProgress: "",
            goodArrivalStatus: "",
            arrivalTime: "",
            projectRemark: "",
          };
          list.unshift(obj);
          this.dataList = list;
          if (res.data) {
            if (this.getModelMsgStatus == 1){
              this.getModelMsgStatus = this.getModelMsgStatus + 1
              this.innerPriceModelList = res.data.innerPriceList
              this.actualValuePriceModelList = res.data.actualValuePriceList
              this.saleRealPriceModelList = res.data.saleRealPriceList
              this.estimatedCostModelList = res.data.estimatedCostList
              this.actualCostModelList = res.data.actualCostList
              let innerPriceList = []
              res.data.innerPriceList.forEach(item => {
                innerPriceList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.innerPriceList = innerPriceList
              let actualValuePriceList = []
              res.data.actualValuePriceList.forEach(item => {
                actualValuePriceList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.actualValuePriceList = actualValuePriceList
              let saleRealPriceList = []
              res.data.saleRealPriceList.forEach(item => {
                saleRealPriceList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.saleRealPriceList = saleRealPriceList
              let estimatedCostList = []
              res.data.estimatedCostList.forEach(item => {
                estimatedCostList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.estimatedCostList = estimatedCostList
              let estimatedSelfMediaCostList = []
              res.data.estimatedSelfMediaCostList.forEach(item => {
                estimatedSelfMediaCostList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.estimatedSelfMediaCostList = estimatedSelfMediaCostList
              let estimatedExternalMediaCostList = []
              res.data.estimatedExternalMediaCostList.forEach(item => {
                estimatedExternalMediaCostList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.estimatedExternalMediaCostList = estimatedExternalMediaCostList
              let actualCostList = []
              res.data.actualCostList.forEach(item => {
                actualCostList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.actualCostList = actualCostList
              let actualSelfMediaCostList = []
              res.data.actualSelfMediaCostList.forEach(item => {
                actualSelfMediaCostList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.actualSelfMediaCostList = actualSelfMediaCostList
              let actualExternalMediaCostList = []
              res.data.actualExternalMediaCostList.forEach(item => {
                actualExternalMediaCostList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.actualExternalMediaCostList = actualExternalMediaCostList

              let arrivalRateList = []
              res.data.arrivalRateList.forEach(item => {
                arrivalRateList.push({
                  label: !item ? 0 : item,
                  value: !item ? 0 : item,
                })
              })
              this.arrivalRateList = arrivalRateList
            }
            if (res.data.useToPriceStringMap){
              let map = res.data.useToPriceStringMap
              let useToPriceList = []
              for (let key in map) {
                let obj = {
                  column: key,
                  label: map[key],
                }
                this.showTableColumnModelList.push(obj)
                useToPriceList.push(obj)
              }
              this.useToPriceList = useToPriceList
            }
          }
          this.tableLoading = false;
        }
      });
    },
    handleExport() {
      if (!this.dataList || this.dataList.length <= 0) {
        this.$message({
          type: "error",
          message: "无项目可以进行导出",
        });
        return;
      }
      this.tableLoading = true;
      const params = {
        token: this.$store.state.token,
        useType: this.useType,
      };
      if (this.areaId) {
        params.areaId = this.areaId;
      }
      if (this.invoiceCompany) {
        params.invoiceCompany = this.invoiceCompany;
      }
      if (this.projectName) {
        params.projectName = this.projectName;
      }
      if (this.brands) {
        params.brands = this.brands;
      }
      if (this.businessIds && this.businessIds.length > 0) {
        params.businessIds = this.businessIds.join(",");
      }
      if (this.search.areaId && this.search.areaId.length > 0) {
        params.areaIds = this.search.areaId.join(",");
      }
      if (this.search.statuses && this.search.statuses.length > 0) {
        params.statuses = this.search.statuses.join(",");
      }
      if (
        this.search.arrivalProgressIds &&
        this.search.arrivalProgressIds.length > 0
      ) {
        params.arrivalProgressIds = this.search.arrivalProgressIds.join(",");
      }
      if (
        this.search.invoiceCompanyIds &&
        this.search.invoiceCompanyIds.length > 0
      ) {
        params.invoiceCompanyIds = this.search.invoiceCompanyIds.join(",");
      }
      if (this.search.businessIds && this.search.businessIds.length > 0) {
        params.businessIds = this.search.businessIds.join(",");
      }
      if (this.chooseArrivalMonth && this.chooseArrivalMonth.length > 0) {
        (params.startArrivalTime = this.chooseArrivalMonth[0].getTime()),
          (params.endArrivalTime = this.chooseArrivalMonth[1].getTime());
        this.chooseMonth = null;
      }
      if (this.chooseMonth && this.chooseMonth.length > 0) {
        (params.time = this.chooseMonth[0].getTime()),
          (params.endTime = this.chooseMonth[1].getTime());
      }
      // if(((!this.chooseArrivalMonth && this.chooseArrivalMonth.length <= 0)&&(!this.chooseMonth && this.chooseMonth.length <= 0))){
      //     this.$message({
      //         type: 'error',
      //         message: '请至少选择一个时间条件'
      //     });
      //     return
      // }
      if (!this.chooseArrivalMonth && !this.chooseMonth) {
        this.$message({
          type: "error",
          message: "请至少选择一个时间条件",
        });
        return;
      }
      API.doExportOrder(params).then((res) => {
        if (res) {
          const content = res.data;
          const blob = new Blob([content]);
          // 从response的headers中获取filename,
          // 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
          var contentDisposition = res.headers["content-disposition"];
          var patt = new RegExp("filename=([^;]+\\.[^\\.;]+);*");
          var result = patt.exec(contentDisposition);
          const fileName = decodeURI(result[1]);
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(blob, fileName);
          }
        }
      });
    },
    formatterTime(time) {
      return this.$moment(time).format("YYYY-MM-DD");
    },
  },
};
</script>
<style lang="scss">
.el-table .success-row {
  td {
    background-color: rgb(213, 236, 241) !important;
  }
}
.el-table .danger-row {
  td {
    color: rgb(247, 66, 21) !important;
  }
}
</style>
<style scoped>
.exportButton {
  position: absolute; /* 设置button为绝对定位 */
  top: 60px;
  right: 20px;
  font-size: 18px;
  font-weight: 400;
}
.total_order_month {
  width: 100%;
  margin-top: -70px;
}
.choose_month {
  margin: 10px 0;
  display: flex;
  align-items: center;
  /* flex-wrap: wrap; */
}
.choose_month_select {
  padding-right: 20px;
  width: 360px;
}
.month_project {
  padding-top: 20px;
  position: relative;
}
.month_project_title {
  font-size: 20px;
  font-weight: bold;
  padding-bottom: 5px;
}
.global-page {
  padding-top: 10px;
}
.choose_title {
  display: flex;
  min-width: 40px;
}
</style>
<style scoped>
.el-divider--horizontal {
  margin: 5px 0;
}
</style>
